<template>
  <div>
<el-form-item size="large" label="风险类型" prop="insTypeVal">
              <el-select
                v-model="riskTypes.riskTypeVal"
                @change="changeSelectRisktypes"
                filterable
                multiple
                clearable
                collapse-tags
                placeholder="请选择">
                <el-option
                  v-for="(item) in riskTypes.options"
                  :key="item.riskNo"
                  :label="item.riskType"
                  :value="item.riskNo">
                  <span style="float: left">
                    <img src="" v-if="item.showimg === 'show3'">
                    <img src="" v-if="item.showimg === 'show2'">
                    <img src="" v-if="item.showimg === 'show1'">
                  </span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.riskType }}</span>
                </el-option>
              </el-select>
            </el-form-item>
  </div>
</template>

<script>
export default {
  data () {
    return {
      riskTypes: {
        // showimg: 'show1',
        isIndeterminate: true,
        options: [
          { riskType: "全部", riskNo: "全部", showimg: "show1" },
          { riskType: "有效", riskNo: "1", showimg: "show1" },
          { riskType: "失效", riskNo: "0", showimg: "show1" },
          { riskType: "ke失效", riskNo: "-2", showimg: "show1" }
        ],
        selects: [],
        oldOptions: [],
        riskTypeVal: []
      },
    }
  },
  methods: {
    //风险类型下拉选择
    changeSelectRisktypes(val) {
      console.info(val);
      let allValues = [];
      for (let item of this.riskTypes.options) {
        allValues.push(item.riskNo);
      }
      const oldVal =
        this.riskTypes.oldOptions.length === 0
          ? []
          : this.riskTypes.oldOptions[0];
      if (val.length) {
        if (val.includes("全部")) {
          this.riskTypes.riskTypeVal = allValues;
          this.riskTypes.options.forEach(item => (item.showimg = "show3"));
        }
        if (oldVal.includes("全部") && !val.includes("全部")) {
          if (val.length === allValues.length - 1) {
            this.riskTypes.riskTypeVal = [];
            this.riskTypes.options.forEach(item => (item.showimg = "show1"));
          } else {
            this.riskTypes.options[0].showimg = "show2";
            val.forEach(item => {
              this.riskTypes.options[allValues.indexOf(item)].showimg = "show3";
            });
          }
        }
        if (oldVal.includes("全部") && val.includes("全部")) {
          const index = val.indexOf("全部");
          val.splice(index, 1); // 排除全选选项
          this.riskTypes.riskTypeVal = val;
          this.riskTypes.options.forEach(item => (item.showimg = "show1"));
          this.riskTypes.options[0].showimg = "show2";
          val.forEach(item => {
            this.riskTypes.options[allValues.indexOf(item)].showimg = "show3";
          });
        }
        if (!oldVal.includes("全部") && !val.includes("全部")) {
          if (val.length === allValues.length - 1) {
            this.riskTypes.riskTypeVal = ["全部"].concat(val);
            this.riskTypes.options.forEach(item => (item.showimg = "show3"));
          } else if (val.length === 0) {
            this.riskTypes.options.forEach(item => (item.showimg = "show1"));
          } else {
            this.riskTypes.options.forEach(item => (item.showimg = "show1"));
            this.riskTypes.options[0].showimg = "show2";
            val.forEach(item => {
              this.riskTypes.options[allValues.indexOf(item)].showimg = "show3";
            });
          }
        }
      } else {
        this.riskTypes.options.forEach(item => (item.showimg = "show1"));
      }
      this.riskTypes.oldOptions[0] = this.riskTypes.riskTypeVal;
      console.info(this.riskTypes.riskTypeVal);
      console.info(this.riskTypes.options);
    }
  }
}
</script>